<template>
    <div id="welcome-container">
        <!-- 面包屑 -->
        <el-breadcrumb separator="/" style="padding-left: 10px; padding-bottom: 10px; font-size: 12px">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>欢迎</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row :gutter="15">
            <!-- 左边 -->
            <el-col :span="13">
                <!-- 用户信息 -->
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>用户信息</span>
                        <el-button style="float: right" size="mini" plain loading type="primary">用户中心</el-button>
                        <el-button type="primary" plain style="float: right; margin-right: 10px" size="mini"
                            >获取信息</el-button
                        >
                    </div>
                    <el-tooltip class="item" effect="dark" content="换头像功能还未实现" placement="top-start">
                        <div class="img-box" style="float: left">
                            <img :src="userInfo.avatar" alt="" width="90px" height="90px" style="border-radius: 5px" />
                        </div>
                    </el-tooltip>
                    <div class="right" style="float: right; width: 500px; margin-bottom: 10px">
                        <el-table :data="tableInfo" border style="width: 100%">
                            <el-table-column prop="username" label="用户账号"></el-table-column>
                            <el-table-column prop="nickname" label="用户昵称"></el-table-column>
                            <el-table-column prop="department" label="所属部门"></el-table-column>
                            <el-table-column prop="roles" label="用户角色" width="150"></el-table-column>
                        </el-table>
                    </div>
                </el-card>
                <!--   功能列表   -->
                <el-row style="margin-top: 10px" :gutter="1">
                    <el-card style="height: 125px">
                        <el-col :span="6">
                            <div class="grid-content bg-purple">
                                <router-link to="/products">
                                    <img
                                        src="@/assets/1.svg"
                                        alt
                                        width="60.8px;"
                                        style="margin: 0px auto; cursor: pointer; margin-left: 20px"
                                    />
                                </router-link>
                                <div style="font-size: 12px; margin-top: 5px; margin-left: 25px">物资资料</div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple-light">
                                <router-link to="/stocks">
                                    <img
                                        src="@/assets/2.svg"
                                        alt
                                        width="60.8px;"
                                        style="cursor: pointer; margin-left: 20px"
                                    />
                                </router-link>
                                <div style="font-size: 12px; margin-top: 5px; margin-left: 25px">物资库存</div>
                            </div>
                        </el-col>

                        <el-col :span="6">
                            <div class="grid-content bg-purple-light">
                                <router-link to="/inStocks">
                                    <img
                                        src="@/assets/3.svg"
                                        alt
                                        width="60.8px;"
                                        style="cursor: pointer; margin-left: 20px"
                                    />
                                </router-link>

                                <div style="font-size: 12px; margin-top: 5px; margin-left: 25px">物资入库</div>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="grid-content bg-purple"></div>
                            <router-link to="/outStocks">
                                <img
                                    src="@/assets/4.svg"
                                    alt
                                    width="60.8px;"
                                    style="cursor: pointer; margin-left: 20px"
                                />
                            </router-link>
                            <div style="font-size: 12px; margin-top: 5px; margin-left: 30px">物资发放</div>
                        </el-col>
                    </el-card>
                </el-row>

                <!--     echarts柱状图   -->
                <el-card class="box-card" style="margin-top: 10px; padding: 0px; width: 100%">
                    <div id="volume" style="width: 100%; height: 270px"></div>
                </el-card>
            </el-col>

            <!-- 右边音乐播放器 -->
            <el-col :span="11">
                <div class="grid-content bg-purple">
                    <el-card style="height: 650px; min-height: 300px">
                        <!-- 轮播图 -->
                        <!-- <el-carousel height="180px">
                            <el-carousel-item v-for="item in 3" :key="item"></el-carousel-item>
                        </el-carousel> -->
                        <!-- 音乐播放器 -->
                        <!-- <aplayer
                            style="margin-top: 20px; margin-bottom: 30px"
                            autoplay
                            :music="{
                                title: '给我一个理由忘记',
                                artist: 'A-Lin',
                                src: 'http://music.163.com/song/media/outer/url?id=25640799.mp3',
                                pic: 'http://p2.music.126.net/0POVOSSjqgVoOUGc5haWBQ==/109951163392311918.jpg',
                            }"
                            :list="musicList"
                        ></aplayer> -->
                        <el-calendar>
                            <!-- 这里使用的是 2.5 slot 语法，对于新项目请使用 2.6 slot 语法-->
                            <template slot="dateCell" slot-scope="{ date, data }">
                                <p :class="data.isSelected ? 'is-selected' : ''">
                                    {{ data.day.split("-").slice(1).join("-") }} {{ data.isSelected ? "✔️" : "" }}
                                </p>
                            </template>
                        </el-calendar>
                    </el-card>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import echarts from "echarts";
import aplayer from "vue-aplayer";
export default {
    name: "Welcome",
    components: {
        //引入音乐播放模块
        aplayer: aplayer,
    },
    data() {
        return {
            tableInfo: [],
            userInfo: {},

            xData: ["12-0"],
            allData: [1],
            myData: [1],

            musicList: [
                {
                    artist: "Eminem",
                    lrc: "",
                    title: "Airplanes",
                    src: "http://music.163.com/song/media/outer/url?id=26714821.mp3",
                    pic: "http://p4.music.126.net/H9HJibEzTL34aIT6nsqKsQ==/5682276092402519.jpg",
                },
                {
                    artist: "Tinashe",
                    lrc: "",
                    title: "Story of Us",
                    src: "http://music.163.com/song/media/outer/url?id=1403428061.mp3",
                    pic: "http://p3.music.126.net/l2XttTpEa14IEZtUsQX1HA==/109951164486978461.jpg",
                },
                {
                    artist: "Chris Brown",
                    lrc: "",
                    title: "War For You",
                    src: "http://music.163.com/song/media/outer/url?id=30431534.mp3",
                    pic: "http://p3.music.126.net/YWkl1JXVKm7bOBAew72lGg==/109951163958771792.jpg",
                },
                {
                    artist: "Sarah Darling",
                    lrc: "",
                    title: "Jack of Hearts",
                    src: "http://music.163.com/song/media/outer/url?id=19132440.mp3",
                    pic: "http://p4.music.126.net/4q3kpn5VLo3x7hVWttj0QA==/109951164802108652.jpg",
                },
                {
                    artist: "Benjamin Ingrosso",
                    lrc: "",
                    title: "Costa Rica",
                    src: "http://music.163.com/song/media/outer/url?id=1372897252.mp3",
                    pic: "http://p4.music.126.net/mmm97zC81t73rToPFuXXnw==/109951164159882466.jpg",
                },
                {
                    artist: "Yo Trane",
                    lrc: "",
                    title: "Affection",
                    src: "http://music.163.com/song/media/outer/url?id=1393553542.mp3",
                    pic: "http://p4.music.126.net/T_vdbfQPO4HE4zVE_8rgCQ==/109951164389023010.jpg",
                },
            ], //音乐素材
        };
    },

    created() {
        this.userInfo = this.$store.state.userInfo;
        // console.log("userInfo", this.userInfo);
        const roles = this.userInfo.isAdmin ? "超级管理员" : this.userInfo.roles;
        this.tableInfo.push({
            username: this.userInfo.username,
            nickname: this.userInfo.nickname,
            department: this.userInfo.department,
            roles: roles,
        });
    },

    mounted() {
        this.getloginReport(this.userInfo.username);
    },

    methods: {
        getEchartData() {
            // j基于准备好的dom 初始化echarts实例
            const volume = echarts.init(document.getElementById("volume"));
            // 指定图表的配置项和数据
            const option = {
                title: {
                    text: "用户登入统计",
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: "none",
                        },
                        dataView: { readOnly: false }, //  缩放
                        magicType: { type: ["bar", "line"] }, ///　　折线  直方图切换
                        restore: {}, // 重置
                        saveAsImage: {}, // 导出图片
                    },
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        crossStyle: {
                            color: "#eee",
                        },
                    },
                },
                legend: {
                    type: "plain",
                    data: ["全部", "我"],
                },
                xAxis: {
                    // data: ["12-01", "12-02", "12-03", "12-04", "12-05", "12-06"],
                    data: this.xData,
                },
                yAxis: {
                    type: "value",
                },
                series: [
                    {
                        name: "全部",
                        // data: [0, 10, 40, 50, 60, 70],
                        data: this.allData,
                        type: "bar",
                        showBackground: true,
                        animationDuration: 1500,
                        animationEasing: "cubicInOut",
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(30, 144, 255，0.5)",
                        },
                    },
                    {
                        name: "我",
                        // data: [0, 5, 20, 80, 70, 10],
                        data: this.myData,
                        type: "bar",
                        showBackground: true,
                        animationDuration: 2000,
                        animationEasing: "cubicInOut",
                    },
                ],
            };

            // 绘制图表
            volume.setOption(option);
        },

        // 获取柱状图数据
        async getloginReport(username) {
            let { data: res } = await this.$http.post("loginLog/loginReport", { username: username });
            // console.log("res", res);
            if (res.code == 200) {
                const that = this;
                this.xData = [];
                this.allData = [];
                this.myData = [];
                res.data.all.forEach((e1) => {
                    that.xData.push(e1.days);
                    that.allData.push(e1.count);
                });
                for (let i = 0; i < this.xData.length; i++) {
                    let count = 0;
                    for (let j = 0; j < res.data.me.length; j++) {
                        if (that.xData[i] === res.data.me[j].days) {
                            count = res.data.me[j].count;
                            break;
                        } else {
                            count = 0;
                        }
                    }
                    that.myData.push(count);
                    // 实例化echarts对象
                    this.getEchartData();
                }
            } else {
                this.$message.error("登入报表数据获取失败!");
            }
        },
    },
};
</script>

<style lang="less" scoped>
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.is-selected {
    color: #1989fa;
}
</style>
